<template>
  <div class="canvas1">
    <canvas class="canS" :id="canvasId" width="750" height="1590"></canvas>
    <div class="allBox">
      <div class="tou">
        <div class="touText">
          <p class="p1">
            <img src="/static/images/template/tou.png" /> {{ adviserName }}
            <span>{{ houseName }}</span>
          </p>
          <p class="p2">
            <span> 手机：{{ adviserTel }} | 微信：{{ adviserWX }}</span>
          </p>
          <p class="p3">长按识别小程序码，查看更多楼盘资讯</p>
        </div>
        <div class="touImg">
          <img class="erImg" src="/static/images/template/er.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import bgMapMgr from "@/biz/bgMap/bgMap";
  export default {
    props: ["tuUrl1", "editorInfo", "shortDetails", "keyIndex"],
    components: {},
    data() {
      return {
        buildMess: this.$dt.buildInfo(), //案场的所有信息
        houseName: "这里显示楼盘名称",
        articleTitle: "这是个标题样例，至多20个字。这是个标题样例",
        articleCon: "这是正文内容样例，至多150个字。这是正文内容样例，至多150个字。这是正文内容样例，至多150个字。这是正文内容样例，至多150个字。这是正文内容样例，至多150个字。这是正文内容样例，至多150个字。这是正文内容样例，至多150个字。这是正文内容样例，至多150个字。这是正文内容样例，至多150",
        adviserName: "麦房宝",
        adviserTel: "13888888888",
        adviserWX: "tospur",
        imgTu: "/static/images/template/tu.jpg",

        imgHouse: "/static/images/template/fang.png",
        imgHeng: "/static/images/template/heng.png",
        canvasId: "canvas" + this.keyIndex,
      };
    },

    methods: {
      // 生成图片
      convertCanvasToImage() {
        var canvas = document.getElementById(this.canvasId);
        var image = new Image();
        image.crossOrigin = "";
        image.src = canvas.toDataURL("image/png");
        this.unloadFileCanvas(image.src);
      },
      unloadFileCanvas(image) {
        let params = {};
        params.multipartFile = this.base64toFile(image);
        bgMapMgr.unloadFileCanvas(params).then((res) => {
          this.canvasImgUrl = res.imageURL;
          this.$store.dispatch("canvasImg", this.canvasImgUrl);
          // this.$tool.setStorage({ canvasImg: JSON.stringify(this.canvasImgUrl) })
        });
      },
      base64toFile(base, filename) {
        var arr = base.split(",");
        var mime = arr[0].match(/:(.*?);/)[1];
        var suffix = mime.split("/")[1];
        var bstr = atob(arr[1]);
        var n = bstr.length;
        var u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        //转换成file对象
        return new File([u8arr], `${filename}.${suffix}`, { type: mime });
      },
      fillRoundRect(
        cxt,
        x,
        y,
        width,
        height,
        radius,
        fillColor,
        direction,
        globalAlpha
      ) {
        //圆的直径必然要小于矩形的宽高
        if (2 * radius > width || 2 * radius > height) {
          return false;
        }

        cxt.save();
        cxt.translate(x, y);
        //绘制圆角矩形的各个边
        this.drawRoundRectPath(cxt, width, height, radius, direction);
        if (globalAlpha) {
          cxt.globalAlpha = 0.4;
        }

        cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值
        cxt.fill();
        cxt.restore();
      },
      // strokeRoundRect(cxt, x, y, width, height, radius, /*optional*/ lineWidth, /*optional*/ strokeColor) {
      //   //圆的直径必然要小于矩形的宽高
      //   if(2 * radius > width || 2 * radius > height) {
      //     return false;
      //   }

      //   cxt.save();
      //   cxt.translate(x, y);
      //   //绘制圆角矩形的各个边
      //   this.drawRoundRectPath(cxt, width, height, radius);
      //   cxt.lineWidth = lineWidth || 2; //若是给定了值就用给定的值否则给予默认值2
      //   cxt.strokeStyle = strokeColor || "#000";
      //   cxt.stroke();
      //   cxt.restore();
      // },
      drawRoundRectPath(cxt, width, height, radius, direction) {
        cxt.beginPath(0);
        //从右下角顺时针绘制，弧度从0到1/2PI
        direction == "down" &&
          cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
        //矩形下边线
        cxt.lineTo(direction == "up" ? 0 : radius, height);
        //左下角圆弧，弧度从1/2PI到PI
        direction == "down" &&
          cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
        //矩形左边线
        cxt.lineTo(0, direction == "down" ? 0 : radius);
        //左上角圆弧，弧度从PI到3/2PI
        direction == "up" &&
          cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);
        //上边线
        cxt.lineTo(direction == "down" ? width : width - radius, 0);
        //右上角圆弧
        direction == "up" &&
          cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
        //右边线
        cxt.lineTo(width, direction == "up" ? height : height - radius);
        cxt.closePath();
      },
      // 绘制自动换行的文本
      canvasTextAutoLine(str, ctx, initX, initY, lineHeight, lineNum) {
        let arr = str.split('\n')
        var lineda = 1;
        var canvasWidth = "656";

        arr.forEach((item, index) => {
          let lineWidth = 0;
          let lastSubStrIndex = 0;

          if (index > 0) {
            initY += lineHeight;
            lineda += 1
          }
          if (lineNum && lineda > lineNum) {
            return false;
          }

          for (let i = 0; i < item.length; i++) {
            lineWidth += ctx.measureText(item[i]).width;
            if (lineWidth > canvasWidth - initX) {
              //减去initX,防止边界出现的问题
              if (lineNum && lineda > lineNum) {
                return false;
              } else {
                ctx.fillText(item.substring(lastSubStrIndex, i), initX, initY);
                initY += lineHeight;
                lineda += 1;
                lineWidth = 0;
                lastSubStrIndex = i;
              }
            }
            if (i == item.length - 1) {
              ctx.fillText(item.substring(lastSubStrIndex, i + 1), initX, initY);
            }
          }
        });


        // for (let i = 0; i < str.length; i++) {
        //   lineWidth += ctx.measureText(str[i]).width;
        //   if (lineWidth > canvasWidth - initX || str[i] == "\n") {
        //     //减去initX,防止边界出现的问题
        //     lineda += 1;
        //     if (lineNum && lineda > lineNum + 1) {
        //       return false;
        //     } else {
        //       ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
        //       initY += lineHeight;
        //       lineWidth = 0;
        //       lastSubStrIndex = i;
        //     }
        //   }
        //   if (i == str.length - 1) {
        //     ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
        //   }
        // }
      },

      xianDuan() {
        var canvas = document.getElementById(this.canvasId);
        var ctx = canvas.getContext("2d");
        // 加载背景图片
        ctx.beginPath();
        let img = new Image();
        img.crossOrigin = "";
        img.src = this.tuUrl1;
        img.onload = () => {
          ctx.drawImage(img, 0, 0, 750, 1590, 0, 0, 750, 1590);
          // icon
          ctx.beginPath();
          let imgHouse = new Image();
          imgHouse.crossOrigin = "";
          imgHouse.src = this.imgHouse;
          imgHouse.onload = () => {
            ctx.drawImage(imgHouse, 0, 0, 48, 48, 40, 52, 48, 48);
            // 楼盘名称
            ctx.beginPath();
            ctx.fillStyle = "white";
            ctx.font = "40px arial";
            ctx.fillText(this.houseName, 109, 96);

            ctx.closePath();
            // ctx.closePath();
            // // 绘制圆角矩形
            ctx.beginPath();
            this.fillRoundRect(ctx, 40, 336, 670, 860, 20, "white", "down");
            ctx.closePath();

            // ctx.closePath();
            // 标题
            ctx.beginPath();
            ctx.fillStyle = "#fff";
            ctx.font = "bold 40px arial";
            this.canvasTextAutoLine(this.articleTitle, ctx, 40, 170, 48);
            ctx.closePath();

            // 原点背景
            ctx.beginPath();
            this.fillRoundRect(
              ctx,
              40,
              276,
              670,
              60,
              20,
              "white",
              "up",
              "globalAlpha"
            );
            ctx.closePath();
            // 两个原点
            ctx.beginPath();
            ctx.fillStyle = "white";
            ctx.arc(80, 310, 12, 0, Math.PI * 2, false);
            ctx.fill();
            ctx.closePath();

            ctx.beginPath();
            ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
            ctx.arc(96, 310, 12, 0, Math.PI * 2, false);
            ctx.fill();
            ctx.closePath();

            // 文本内容
            ctx.beginPath();
            ctx.fillStyle = "#333";
            ctx.font = "30px arial";
            this.canvasTextAutoLine(this.articleCon, ctx, 72, 400, 46, 8);
            ctx.closePath();
            // 头图片
            ctx.beginPath();
            let imgTu = new Image();
            imgTu.crossOrigin = "";
            imgTu.src = this.imgTu;
            imgTu.onload = () => {
              // ctx.drawImage(imgTu, 72, 760, 606, 402);
              ctx.drawImage(imgTu, 70, 740, 606, 402);
            };
            ctx.closePath();
          };
          ctx.closePath();
        };
        ctx.closePath();
      },
    },
    computed: {},
    created() {
      if (this.editorInfo) {
        this.houseName = this.buildMess.buHousesName;
        this.articleTitle = this.editorInfo.articleName;
        this.articleCon = this.editorInfo.content;
        this.imgTu = this.editorInfo.fileList[0].url;
      }
      if (this.shortDetails) {
        this.houseName = this.shortDetails.promotionName ?
          this.shortDetails.promotionName :
          this.buildMess.buHousesName;
        this.articleTitle = this.shortDetails.title;
        this.articleCon = this.shortDetails.content;
        this.imgTu = this.shortDetails.picUrl;
      }
    },
    mounted() {
      this.xianDuan();
    },
    watch: {
      tuUrl1(val) {
        this.tuUrl1 = val;
      },
      shortDetails(val) {
        if (val) {
          this.houseName = this.shortDetails.promotionName ?
            this.shortDetails.promotionName :
            this.buildMess.buHousesName;
          this.articleTitle = val.title;
          this.articleCon = val.content;
          this.imgTu = val.picUrl;
        }
      },
      editorInfo(val) {
        if (val) {
          this.houseName = this.buildMess.buHousesName;
          this.articleTitle = val.articleName;
          this.articleCon = val.content;
          this.imgTu = val.fileList[0].url;
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .canvas1 {
    width: 750px;
    // padding: 0 20px 45px;
    // box-sizing: border-box;
    margin: 0 auto;
    // background-size: 100% 100%;
    height: 1590px;
    // height: 795px;
    position: relative;
    zoom: 0.5;
    // transform-origin: 0% 0%;//设置左上角为原点
    // transform:scale(0.5,0.5);
    // margin-bottom: -50%;
  }

  .allBox {
    padding: 0 40px;
    position: absolute;
    top: 1220px;
    left: 0;
    width: 100%;
    z-index: 99999;
  }

  .tou {
    display: flex;
    flex-direction: row;
    padding: 12px;
    border-radius: 8px;

    .touImg {
      margin-left: 10px;

      margin-top: 0px;

      img {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        display: block;
      }
    }

    .touText {
      flex: 1;

      p.p1 {
        font-size: 36px;
        font-weight: 500px;
        color: #fff;
        margin: 20px 0 20px;

        img {
          display: inline-block;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          vertical-align: -12px;
        }

        span {
          background: linear-gradient(90deg,
              #f2dbb3 0%,
              #ffeac6 53%,
              #ffeac6 100%);
          border-radius: 10px;
          font-size: 20px;
          display: inline-block;
          padding: 2px 12px;
          color: #705f42;
        }
      }

      p.p2 {
        span {
          font-size: 24px;
          color: #fff;
          line-height: 24px;
        }
      }

      p.p3 {
        font-size: 26px;
        color: #fff;
        margin-top: 24px;
      }
    }
  }
</style>